<template>
  <div class="page-content big-box">
    <div class="vbox">
      <iframe
        id="playFrame1"
        :src="url"
        width="100%"
        height="500px"
        allowfullscreen=""
        frameborder="0"
        allowtransparency="true"
      ></iframe>
    </div>
    <div class="box">
      <div
        style="height:calc(100% - 200px);overflow-x:hidden;overflow-y:auto;color:white;"
        id="div_CamerList"
      >
        <div class="list-video">
          <img
            src="http://m.hoire.cn/Image/Monitor/Camera/Video-On.png"
            style="height:20px;width:20px;"
          />
          兴宁鸽舍4列监控(G62594029)
        </div>
        <div class="list-video">
          <img
            src="http://m.hoire.cn/Image/Monitor/Camera/Video-On.png"
            style="height:20px;width:20px;"
          />
          兴宁鸽舍1列监控(G24611101)
        </div>
        <div class="list-video">
          <img
            src="http://m.hoire.cn/Image/Monitor/Camera/Video-On.png"
            style="height:20px;width:20px;"
          />
          兴宁鸽舍3列监控(G24611101)
        </div>
        <div class="list-video">
          <img
            src="http://m.hoire.cn/Image/Monitor/Camera/Video-On.png"
            style="height:20px;width:20px;"
          />
          兴宁鸽舍球机监控
        </div>
        <div class="list-video">
          <img
            src="http://m.hoire.cn/Image/Monitor/Camera/Video-On.png"
            style="height:20px;width:20px;"
          />
          兴宁鸽舍2列监控
        </div>
      </div>
      <img
        src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/1329/202204172230275.png"
        class="control"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CameraManage",
  meta: {
    title: "摄像头管理"
  },
  data() {
    return {
      url:
        "https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/G62594029/1.hd.live&autoplay=1&accessToken=at.cafd1pfd0skjgkcccuwvp78u9i1g29e9-7hzdrbbvtb-1ht621v-9rayqwfjm&templete=1"
    };
  },
  mounted() {
    this.getVideoUrl();
  },
  methods: {
    async getVideoUrl() {
      const { data: res } = await this.$http.get("/processing/voice/list");
      console.log(res.data[0].accessToken);
      if (res.data && res.data.length > 0)
        return (this.url = res.data[0].accessToken);
    }
  }
};
</script>

<style lang="scss" scoped>
.big-box {
  display: flex;
}
.vbox {
  flex: 7;
}
.box {
  position: relative;
  flex: 2;
  width: 220px;
  height: 500px;
  background-color: rgb(70, 78, 96);

  .control {
    width: 90%;
    position: absolute;
    bottom: 0;
  }
}
.list-video {
  display: flex;
  align-items: center;
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
  cursor: pointer;
  overflow: hidden;
}
</style>
